import React from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

function Message() {
  const messageArr = [
    { id: '01', title: '消息1' },
    { id: '02', title: '消息2' },
    { id: '03', title: '消息3' }
  ]

  return (
    <>
      <ul>
        {messageArr.map((v) => (
          <li key={v.id}>
            {/* <Link to={`/home/message/detail?id=${v.id}&title=${v.title}`}>{v.title}</Link> */}
            <Link to={{ pathname: '/home/message/detail', state: { id: v.id, title: v.title } }}>{v.title}</Link>
          </li>
        ))}
      </ul>
      <hr />
      <Route path='/home/message/detail' component={Detail} />
    </>
  )
}

export default Message
